<template>
  <div>
   <div class="demo-type">
       <div class="head">
         <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
         </div>
         <div class="user">
           <p>登录/注册</p>
           <p>暂时没有绑定手机号</p>
       </div>
     </div>

    <el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="我的订单" name="1">
    <div></div>

  </el-collapse-item>
  <el-collapse-item title="积分商场" name="2">
  </el-collapse-item>
  <el-collapse-item title="会员卡" name="3">
  </el-collapse-item>
  <el-collapse-item title="服务中心" name="4">

  </el-collapse-item>
</el-collapse>

  </div>
</template>

<script>
  export default {
      data() {
        return {
          activeNames: ['1']
        };
      },
      methods: {
        handleChange(val) {
          // console.log(val);
        }
      }
    }
</script>

<style scoped>
 .demo-type{
   display: flex;
   height: 100px;
   background-color: #00FFFF;

 }
 .head,.user{
   margin-top: 20px;
   font-size: 17px;
   font-weight: bold;
 }
 .box-card{
   border: 1px solid #000000;
 }
</style>
